<template>
  <el-table-column
    :key="randomKey"
    v-bind="$attrs"
    v-on="$listeners"
    :prop="column.prop"
    :label="column.label"
    :type="column.type"
    :index="column.index"
    :column-key="column.columnKey"
    :width="column.width"
    :min-width="column.minWidth"
    :fixed="column.fixed"
    :render-header="column.renderHeader"
    :sortable="column.sortable || false"
    :sort-method="column.sortMethod"
    :sort-by="column.sortBy"
    :sort-orders="column.sortOrders"
    :resizable="column.resizable || true"
    :formatter="column.formatter"
    :show-overflow-tooltip="
      !isFinite(column.showOverflowTooltip)
        ? true
        : column.showOverflowTooltip
        ? true
        : false
    "
    :align="column.align || align || 'left'"
    :header-align="column.headerAlign || headerAlign || column.align || align || 'left'"
    :class-name="column.className"
    :label-class-name="column.labelClassName"
    :selectable="column.selectable"
    :reserve-selection="column.reserveSelection || false"
    :filters="column.filters"
    :filter-placement="column.filterPlacement"
    :filter-multiple="column.filterMultiple"
    :filter-method="column.filterMethod"
    :filtered-value="column.filteredValue"
  >
    <template slot="header" slot-scope="scope">
      <lb-render v-if="column.renderHeader" :scope="scope" :render="column.renderHeader"> </lb-render>
      <span v-else>{{ scope.column.label }}</span>
    </template>

    <template slot-scope="scope">
      <lb-render :scope="scope" :render="column.render"> </lb-render>
    </template>

    <template v-if="column.children">
      <lb-column v-for="(col, index) in column.children" :key="index" :column="col"> </lb-column>
    </template>
  </el-table-column>
</template>

<script>
import LbRender from "./lb-render"
import forced from "./forced.js"

export default {
  name: "LbColumn",
  props: {
    column: Object,
    headerAlign: String,
    align: String
  },
  components: {
    LbRender
  },
  data() {
    return {
      randomKey: Math.random()
    }
  },
  methods: {
    async setColumn() {
      if (this.column.type) {
        this.column.renderHeader = forced[this.column.type].renderHeader
        this.column.render = this.column.render || forced[this.column.type].renderCell
      }
      if (this.column.formatter) {
        this.column.render = (h, scope) => {
          return <span>{scope.column.formatter(scope.row, scope.column, scope.row, scope.$index)}</span>
        }
      }
      if (!this.column.render) {
        // 判断是否有字典接口
        if (this.column.option) {
          let selectList = await this.column.option()
          if (this.column.optionProp) {
            selectList = selectList.map((val) => {
              return {
                label: val[this.column.optionProp.label] || "label",
                value: val[this.column.optionProp.value] || "value"
              }
            })
          }
          this.$nextTick(() => {
            this.randomKey = Math.random()
          })
          this.column.render = (h, scope) => {
            const text = selectList.find((val) => val.value == scope.row[scope.column.property]) || {}

            if (this.column.component) {
              const { component } = this.column

              if (component === "el-select") {
                return this.getSelect(h, scope, selectList)
              }
            } else {
              return <span>{text ? text.label : ""}</span>
            }

            //
          }
        } else {
          this.column.render = (h, scope) => {
            const { attrs = {}, style = {}, component, change } = this.column
            const selectAttrs = typeof attrs === "function" ? attrs(scope) : attrs
            // === "el-input"
            if (component) {
              return (
                <component
                  onChange={(val) => this.handleChange(val, scope, change)}
                  {...{ attrs: selectAttrs, style }}
                  v-model={scope.row[scope.column.property]}
                />
              )
            } else {
              return <span>{scope.row[scope.column.property]}</span>
            }
          }
        }
      }
    },
    getSelect(h, scope, list) {
      const { attrs = {}, style = {}, change } = this.column
      const selectAttrs = typeof attrs === "function" ? attrs(scope) : attrs
      return (
        <el-select
          {...{ attrs: selectAttrs, style }}
          onChange={(val) => this.handleChange(val, scope, change)}
          v-model={scope.row[scope.column.property]}
          placeholder={`${$i18n.t("common.select")} ${scope.column.label}`}>
          {list.map((item) => {
            return <el-option key={item.value} label={item.label} value={item.value}></el-option>
          })}
        </el-select>
      )
    },
    handleChange(val, scope, change) {
      if (change) change(val, scope)
    }
  },
  watch: {
    column: {
      handler() {
        this.setColumn()
      },
      immediate: true
    }
  }
}
</script>
